@page "/users/{userName}"
@inject ICurrentUser CurrentUser
@inject IClock Clock
@inject IHtmlLocalizer<EventHubResource> L
@using System.Globalization
@using EventHub.Localization
@using EventHub.Web.Pages.Events.Components.EventsArea
@using EventHub.Web.Pages.Organizations.Components.OrganizationsArea
@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.Timing
@using Volo.Abp.Users
@model EventHub.Web.Pages.UserModel

@section styles {
    <abp-style src="/Pages/User.css" />
}

<div class="container pt-4">
    <div class="row py-4">
        <div class="col-md-3">
            <div class="">
                <ul class="card list-group">
                    <div class="card-body">
                        <div class="text-center">
                            <div>
                                <div class="profile-pic">
                                    <div class="position-relative d-inline-block mx-auto">
                                        <img gravatar-email="@Model.User.Email" default-image="Wavatar" gravatar-size="80" class="avatar rounded-circle"/>
                                    </div>
                                </div>
                                @if (Model.User.Name != null && Model.User.Surname != null)
                                {
                                    <h4 class="m-0 mt-4">@Model.User.Name @Model.User.Surname</h4>
                                }
                            </div>
                            <div class="mt-4">
                                <small class="text-muted text-uppercase">UserName</small>
                                <h4 class="m-0">@Model.User.UserName</h4>
                            </div>

                            <div class="mt-4">
                                <small class="text-muted text-uppercase">Registration Date</small>
                                <h5 class="m-0">@Model.User.CreationTime.ToString(CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern)</h5>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
        <div class="col-md-9">
            <abp-row>
                <abp-column size="_8">
                    <ul class="nav nav-tabs profile-nav" id="profileTab">
                        <li class="nav-item">
                            <a href="#UpcomingEvents" class="nav-link active" data-bs-toggle="tab">Upcoming Events</a>
                        </li>
                        <li class="nav-item">
                            <a href="#AttendedEvents" class="nav-link" data-bs-toggle="tab">Attended Events</a>
                        </li>
                        <li class="nav-item">
                            <a href="#Organizations" class="nav-link" data-bs-toggle="tab">Organizations</a>
                        </li>
                    </ul>
                </abp-column>
            </abp-row>
            <div class="tab-content profile-content py-4">
                <div id="UpcomingEvents" class="tab-pane fade show active">
                    <div class="row">
                        <div class="col">
                            <div class="card">
                                <div class="card-body" style="min-height: 496px">
                                    <h3 class="mb-4">Upcoming Events</h3>
                                    @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new
                                    {
                                        minDate = Clock.Now.ClearTime(),
                                        registeredUserId = Model.User.Id,
                                        maxResultCount = 6,
                                        skipCount = 0,
                                    })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="AttendedEvents" class="tab-pane fade">
                    <div class="row">
                        <div class="col">
                            <div class="card">
                                <div class="card-body" style="min-height: 496px">
                                    <h3 class="mb-4">Attended Events</h3>
                                    <div class="past-events">
                                        @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new
                                        {
                                            maxDate = Clock.Now.ClearTime(),
                                            registeredUserId = Model.User.Id,
                                            maxResultCount = 6,
                                            skipCount = 0
                                        })
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="Organizations" class="tab-pane fade">
                    <div class="row">
                        <div class="col">
                            <div class="card">
                                <div class="card-body" style="min-height: 496px">
                                    <div id="membership-organizations">
                                        <h3 class="mb-4">My Organizations</h3>
                                        @await Component.InvokeAsync(typeof(OrganizationsAreaViewComponent), new
                                        {
                                            registeredUserId = Model.User.Id,
                                            maxResultCount = 6
                                        })
                                    </div>
                                    <div id="owned-organizations">
                                        <div class="row mb-4">
                                            <div class="col-8">
                                                <h3>
                                                    Owned Organizations
                                                </h3>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <partial name="~/Pages/Organizations/Components/OrganizationsArea/_organizationListSection.cshtml" model="@Model.Organizations"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>